<template>
    <div style="margin: 10px;overflow: hidden">
        <Card>
            <p slot="title">
                查询
            </p>
            <div class="search-con search-con-top" >
                <Select clearable v-model="searchKey" class="search-col" style="width: 100px;">
                    <Option v-for="item in columns" :value="item.key" :key="`search-col-${item.key}`">{{ item.title }}</Option>
                </Select>
                <Input @on-change="handleClear" clearable placeholder="输入关键字搜索" class="search-input" v-model="searchValue" search  />
                <Tooltip theme="light">
                    <Icon type="ios-funnel-outline" />
                    <div slot="content">
                        <Row style="margin-top: 10px;">
                            <Col>
                                <Select @on-change="handleSearch" v-model="isUse" style="width:200px">
                                    <Option :value="1">可用</Option>
                                    <Option :value="2">禁用</Option>
                                </Select>
                            </Col>
                        </Row>
                        <Row style="margin-top: 10px;">
                            <Col>
                                <DatePicker transfer format="yyyy-MM-dd" @on-change="handleSearch" v-model="crtDateStart" type="date" clearable placeholder="请选择开始时间" style="width: 200px"></DatePicker>
                            </Col>
                        </Row>
                        <Row style="margin-top: 10px;">
                            <Col>
                                <DatePicker transfer format="yyyy-MM-dd" @on-change="handleSearch" v-model="crtDateEnd" type="date" clearable placeholder="请选择结算时间" style="width: 200px"></DatePicker>
                            </Col>
                        </Row>
                    </div>
                </Tooltip>
                <Button @click="handleSearch" class="search-btn" type="primary"><Icon type="search"/>&nbsp;&nbsp;搜索</Button>
            </div>
        </Card>
        <Card style="margin-top: 10px;">
            <ButtonGroup>
                <Button @click="addDict()">增加</Button>
                <Button @click="regDict()">修改</Button>
                <Button @click="deleteDict()">删除</Button>
            </ButtonGroup>
            <Table ref="dictTable" style="margin-top: 10px;" :data="dictData" :columns="dictColumns"
                   @on-select="operationDictSelect" @on-select-cancel="operationDictSelect"
                   @on-select-all="operationDictSelect" @on-selection-change="operationDictSelect"
                   @on-sort-change="onSortChange" stripe>
                <template slot="expandRow" slot-scope="props">
                    <div style="padding:16px;">
                        <Row>
                            <Col span="8">
                                <span class="expand-key">字典描述: </span>
                                <span class="expand-value">{{ props.row.text }}</span>
                            </Col>
                            <Col span="8">
                                <span class="expand-key">字典数值: </span>
                                <span class="expand-value">{{ props.row.value }}</span>
                            </Col>
                            <Col span="8">
                                <span class="expand-key">字典类型: </span>
                                <span class="expand-value">{{ props.row.type }}</span>
                            </Col>
                        </Row>
                    </div>
                </template>
                <template slot="action" slot-scope="props">
                    <Poptip v-show="props.isUse=='2'" confirm title="是否启用前端加载当前数据?" transfer @on-ok="operateDict(props.id,1)">
                    <Button   type="warning" size="small">禁用</Button>
                </Poptip>
                    <Poptip v-show="props.isUse=='1'" confirm title="是否禁用前端加载当前数据?" transfer @on-ok="operateDict(props.id,2)">
                        <Button type="primary" size="small" >启用</Button>
                    </Poptip>
                    <Divider type="vertical" />
                    <Button type="primary" size="small" @click="toViewDict(props.id)"  >查看</Button>
                </template>
            </Table>
            <Page style="margin-top: 5px;" show-elevator show-sizer show-total :total="total" :current="current"
                  :page-size="pageSize" @on-change="changePage" @on-page-size-change="changePageSize"></Page>
        </Card>
        <!-- 子组件要调用父组件的方法需要在子组件上加上v-on:子组件需要调用的方法=父组件中的方法 博客地址：https://blog.csdn.net/wpj130/article/details/70318073-->
        <addDict v-model="addShow" v-on:handleSearch="handleSearch"></addDict>
        <updateDict v-model="updateShow" :id="id" v-on:handleSearch="handleSearch"></updateDict>
        <viewDict  v-model="viewShow" :id="id"></viewDict>
    </div>
</template>
<script>
    import addDict from './addDict';
    import updateDict from './updateDict';
    import viewDict from './viewDict';
    import {getDictList,deleteDict,operateDict} from '../../../api/sys/dict/dict-api';
    import CollapsedMenu from '../../main/components/side-menu/collapsed-menu';

    export default {
        components:{
            CollapsedMenu,
            addDict,
            updateDict,
            viewDict
        },
        data() {
            return {
                total: 0,
                current: 1,
                pageSize: 10,
                key:'',
                order:'',
                searchKey:'',
                searchValue:'',
                crtDateStart:'',
                crtDateEnd:'',
                isUse:'',
                addShow:false,
                updateShow:false,
                viewShow:false,
                dictData: [],
                selection: [],
                columns:[{key:'type',title:'字典类型'},{key:'code',title:'字典编码'},{key:'value',title:'字典值'},{key:'text',title:'字典文本'}],
                id:'',
                dictColumns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        type: 'expand',
                        width: 50,
                        render: (h, params) => {
                            return h(
                                'div',
                                this.$refs.dictTable.$scopedSlots.expandRow({row: params.row})
                            );
                        }
                    },
                    {
                        title: '字典类型',
                        key: 'type',
                        sortable: true
                    },
                    {
                        title: '字典编码',
                        key: 'code',
                        sortable: true
                    },
                    {
                        title: '字典数值',
                        key: 'value',
                        sortable: true
                    },
                    {
                        title: '字典描述',
                        key: 'text',
                        sortable: true
                    },
                    {
                        key: 'action',
                        title: '字典状态',
                        align: 'center',
                        render: (h, params) => {
                            return h(
                                'div',
                                this.$refs.dictTable.$scopedSlots.action({isUse: params.row.isUse, id: params.row.id})
                            );
                        }
                    }
                ]
            };
        },
        methods: {
            onSortChange(sort){
                if(sort.order=='normal'){
                    this.order = '';
                }else{
                    this.key = sort.key;
                    this.order = sort.order;
                }
                this.handleSearch();
            },
            queryDict(){
                let  current = this.current;
                let pageSize = this.pageSize;
                let key = this.key;
                let order = this.order;
                let searchKey = this.searchKey;
                let searchValue = this.searchValue;
                let crtDateStart = new Date(this.crtDateStart).getTime();
                let crtDateEnd = new Date(this.crtDateEnd).getTime();
                let isUse= this.isUse;
                const _this = this;
                getDictList({
                    current,
                    pageSize,
                    searchKey,
                    searchValue,
                    crtDateStart,
                    crtDateEnd,
                    isUse,
                    sort:key,
                    order
                }).then(res => {
                    _this.total = res.totalCount;
                    _this.dictData = res.result;
                });
            },
            handleSearch() {
                this.queryDict();
            },
            addDict() {
                this.addShow = true;
            },
            regDict() {
                if(this.selection==undefined||this.selection==''){
                    this.$Message.warning('请先选择一条需要修改的数据！');
                    return false;
                }else if(this.selection.length>1){
                    this.$Message.warning('每次只能修改一条数据！');
                    return false;
                }else{
                    this.id = this.selection[0].id;
                    this.updateShow = true;
                }
            },
            deleteDict() {
                if(this.selection.length>1 || this.selection.length==0){
                    this.$Message.warning('请先选择一条需要删除的数据！');
                    return false;
                }
                this.$Modal.confirm({
                    title: '提示',
                    content: '<p>是否删除当前你选中的字典数据？</p>',
                    onOk: () => {
                        deleteDict({id:this.selection[0].id}).then(res=>{
                            if(res.result){
                                this.$Message.success('删除数据成功！');
                                // 删除数据成功同时刷新grid
                                this.handleSearch();
                            }else{
                                this.$Message.warning('删除数据失败！');
                            }
                        });
                    },
                    onCancel: () => {
                        this.$Message.info('您取消了当前的操作行为！');
                    }
                });

            },
            toViewDict(id){
                this.id = id;
                this.viewShow = true;
            },
            operationDictSelect(selection, row) {
                this.selection = selection;
            },
            changePage(current) {
                this.current = current;
                this.init();
            },
            changePageSize(pageSize) {// 改变每页记录的条数
                this.pageSize = pageSize;
                this.init();
            },
            operateDict(id,isUse){
                operateDict({
                    id,
                    isUse
                }).then(res=> {
                    if (res.result) {
                        this.$Message.success(res.msg);
                        // 更新数据字典状态成功同时刷新grid
                        this.handleSearch();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                });
            },
            handleClear (e) {
                e.target.value === '';
            }
        },
        mounted(){
            // 初始化完成组件的时候执行以下的逻辑
            this.queryDict();
        }
    };
</script>
<style lang="less">
    @import './index.less';
</style>